(function () {
  let container: HTMLDivElement | any = document.querySelector('.main-container')
  // container.onscroll = cddThrottle
  // 添加滑动节流阀
  addThrottle({
    el: container,
    event: 'scroll',
    handler: reactScroll,
    threshold: 250
  })

  // 容器监听器
  function reactScroll(e: Event) {
    console.log(`container clientHeight:${container.clientHeight}\noffsetHeight:${container.offsetHeight}\nscrollHeight:${container.scrollHeight}\ntop:${container.scrollTop}`)
    // console.log(`e is`, e.target)
  }
  // 手动节流阀
  interface eventHandler {
    (e: Event): any
  }
  interface $throttle_parm {
    el: null | HTMLDivElement
    handler: eventHandler | any
    event: string | null
    model?: 0 | 1
    threshold?: number
  }
  // 包装方法
  function addThrottle({ el = null, event = null, handler = null, threshold = 250, model = 0 }: $throttle_parm) {
    let settimeId: number | any
    let settimeId2: number | any
    let start = Date.now();
    (<HTMLElement>el).addEventListener(<string>event, <eventHandler>(model == 0 ? cddThrottle0 : cddThrottle1))
    // 间隔模式

    function cddThrottle0(e: Event) {
      clearTimeout(settimeId)
      settimeId = setTimeout(() => {
        handler(e)
        clearTimeout(settimeId)
      }, threshold);
    }
    // 频率模式
    function cddThrottle1(e: Event) {
      clearTimeout(settimeId2)
      let end = Date.now()
      if (end - start >= threshold) {
        clearTimeout(settimeId2)
        handler(e)
        start = end
      }
      settimeId2 = setTimeout(() => {
        console.log(`最后`)
        handler(e)
      }, threshold > 250 ? 100 : 100);
    }
  }
}())
